<template>
  <div class="home">
    <v-row>
      <v-col style="padding:0;">
        <div
          class="video-block animate__animated animated slideInLeft"
        >Use God's eyes to discover the beauty of the world.</div>
        <video
          class="bg-video"
          loop
          autoplay
          style="width:100%;"
          src="https://kingsr-pan.oss-cn-shenzhen.aliyuncs.com/bg.mp4?Expires=1594026657&OSSAccessKeyId=TMP.3Kg5YnC96u28PGprGFqzrsiea7angEeBnddvm628prTryXCxBW35omGQKA5VBvsaNVY4ee4pLoxaLKapjA8K5KwE9SWR2n&Signature=OEu9rHyXywYWcawPWQd2TTn627s%3D"
        ></video>
      </v-col>
    </v-row>

    <v-container>
      <v-row class="my-10">
        <v-col>
          <h2 class="text-center text-lg" style>
            Jizhi is a company based on UAV, whose main direction is consumer UAV market.
            <br />Meanwhile, there are UAV flight control research and plant protection UAV.
            <br />Our philosophy is: "use God's eyes to discover the beauty of the world."
          </h2>
        </v-col>
      </v-row>

      <v-row>
        <v-col :cols="4">
          <v-hover v-slot:default="{ hover }">
            <v-card :elevation="hover ? 6 : 2" class="mx-auto text-center">
              <v-img src="@/assets/5.jpg" height="150px"></v-img>
              <h3 class="text-center my-2">Company Profile</h3>
              <v-card-subtitle>The world's leading R &amp; D and manufacturer of UAV control systems and UAV solutions</v-card-subtitle>
            </v-card>
          </v-hover>
        </v-col>
        <v-col :cols="4">
          <v-hover v-slot:default="{ hover }">
            <v-card :elevation="hover ? 6 : 2" class="mx-auto text-center">
              <v-img src="@/assets/7.jpg" height="150px"></v-img>
              <h3 class="text-center my-2">Corporate Culture</h3>
              <v-card-subtitle>Committed to innovation, drones serve humans better</v-card-subtitle>
            </v-card>
          </v-hover>
        </v-col>
        <v-col :cols="4">
          <v-hover v-slot:default="{ hover }">
            <v-card :elevation="hover ? 6 : 2" class="mx-auto text-center">
              <v-img src="@/assets/8.jpg" height="150px"></v-img>
              <h3 class="text-center my-2">Office Location</h3>
              <v-card-subtitle>Located in Shenzhen high tech Zone, high tech talents are immediately recruited</v-card-subtitle>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "Home"
};
</script>

<style scoped>
.bg-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  position: relative;
  display: flex;
}
.video-block {
  position: absolute;
  top: 20%;
  left: 10%;
  color: white;
  z-index: 3;
  font-size: 3rem;
}
</style>